<style type="text/css">
    .app-title {
        text-align:center;
        line-height:30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overow: ellipsis;
    }
</style>
<div class="navbar navbar-fixed-top" style="height:30px;min-height: 30px;background-color:#252a3a;color:#ddd;font-size:11px;">
    <div class="row">
        <div class="col-md-3 app-title" title="{{transactionDetail.applicationName}}" data-toggle="tooltip" data-placement="bottom">Application : {{transactionDetail.applicationName}}</div>
        <div class="col-md-3 app-title" title="{{transactionDetail.transactionId}}" data-toggle="tooltip" data-placement="bottom">TransactionId : {{transactionDetail.transactionId}}</div>
        <div class="col-md-3 app-title" title="{{transactionDetail.agentId}}" data-toggle="tooltip" data-placement="bottom">AgentId : {{transactionDetail.agentId}}</div>
        <div class="col-md-3 app-title" title="{{transactionDetail.applicationId}}" data-toggle="tooltip" data-placement="bottom">ApplicationName : {{transactionDetail.applicationId}}</div>
    </div>
</div>

<div id="main-container" class="main-container">
    <div class="ui-layout-north" style="padding:0;position: relative;height:210px;overflow: hidden">
        <div style="position: absolute;left:0;width:49.5%;top:0;bottom:0">
            <agent-chart-group-directive namespace="forTransactionView"></agent-chart-group-directive>
        </div>

        <div style="position: absolute;left:50%;width:50%;top:0;bottom:0;">
            <server-map-directive></server-map-directive>
        </div>
    </div>

    <div class="ui-layout-center" style="width:100%;height:100%;padding:0;">
        <!--<call-stacks namespace="forTransactionView"></call-stacks>-->
        <distributed-call-flow-directive namespace="forTransactionView"></distributed-call-flow-directive>
    </div>

    <div ng-include=" 'error' "></div>
    <div ng-include=" 'warning' "></div>
    <div ng-include=" 'info' "></div>
    <div ng-include=" 'loading' "></div>
</div>